import { useState } from "react";
const TodoAdd = (props) => {
  const [todos, setTodos] = useState('');
  //input 的change 事件
  const onChange= (e) => {
    setTodos(e.target.value)
  }
   //input 的键盘按下事件
  const onKeyDown= (e) => {
    if(todos.trim()==='') return;
    if(e.code === 'Enter') {
      props.todoListAdd(todos)
      setTodos('')
    }
    
  }
  return (
    <header className="header">
      <h1>todos</h1>
      <input className="new-todo" placeholder="What needs to be done?"  autoFocus value={todos}  onChange={onChange} onKeyDown={onKeyDown}/>
    </header>
  );
};

export default TodoAdd;
